import React from 'react';

const Spinner = ({ size = 'md', color = 'primary' }) => {
  // 尺寸映射
  const sizeMap = {
    sm: 'h-4 w-4',
    md: 'h-8 w-8',
    lg: 'h-12 w-12',
    xl: 'h-16 w-16'
  };
  
  // 颜色映射
  const colorMap = {
    primary: 'border-primary-600 border-t-transparent',
    secondary: 'border-gray-600 border-t-transparent',
    success: 'border-green-600 border-t-transparent',
    danger: 'border-red-600 border-t-transparent',
    warning: 'border-yellow-600 border-t-transparent',
    info: 'border-blue-600 border-t-transparent',
    light: 'border-gray-200 border-t-transparent',
    dark: 'border-gray-800 border-t-transparent'
  };
  
  const spinnerSize = sizeMap[size] || sizeMap.md;
  const spinnerColor = colorMap[color] || colorMap.primary;
  
  return (
    <div className="flex justify-center items-center p-4">
      <div 
        className={`animate-spin rounded-full border-2 ${spinnerSize} ${spinnerColor}`}
        role="status"
        aria-label="加载中"
      >
        <span className="sr-only">加载中...</span>
      </div>
    </div>
  );
};

export default Spinner; 